<template>
	<div id="login">
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
			<el-row class="el-font">
				<el-col :span="24">管理员登录</el-col>
			</el-row>
			<el-form-item prop="user">
				<el-input type="text" prefix-icon="el-icon-user-solid" v-model="ruleForm.user" autocomplete="off"
					placeholder="管理员账号"></el-input>
			</el-form-item>
			<el-form-item prop="pass">
				<el-input prefix-icon="el-icon-lock" show-password type="password" v-model="ruleForm.pass"
					autocomplete="off" placeholder="密码"></el-input>
			</el-form-item>
			<el-form-item>
				<el-row class="checkBox">
					<el-checkbox v-model="checked">记住密码</el-checkbox>
				</el-row>

			</el-form-item>

			<el-form-item>
				<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
			</el-form-item>
		</el-form>

	</div>

</template>

<script>
	// import Cookies from 'js-cookie'
	import {
		login,
		loginInfo
	} from '../https/login'
	export default {

		data() {

			var validateUser = (rule, value, callback) => {
				if (value == '') {
					callback(new Error('账号不能为空'));
				} else {

					console.log("哈哈哈哈")
					if (this.ruleForm.user !== '') {
						// 写入自己的校验规则，不能输入中文，只能以字母数字下花线搞定
						let reg = /^[A-Z0-9a-z_]*$/
						if (reg.test(this.ruleForm.user)) {
							// 满足条件返回结果
							callback();
						} else {
							callback(new Error("账号必须为字母数字下划线"))
						}

					}

				}
			};
			var validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('密码不能为空'));
				} else if (value != '') {
					callback()

				}
			};
			return {
				ruleForm: {
					user: '',
					pass: ''
				},
				rules: {
					pass: [{
						validator: validatePass,
						trigger: 'blur'
					}],
					user: [{
						validator: validateUser,
						trigger: 'blur'
					}]

				},
				// 是否记住密码
				checked: false

			}

		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						alert('submit!');
						// 新的封装测试
						let list = {
							username: this.ruleForm.user,
							password: this.ruleForm.pass
						}
						login(list).then(res => {
							console.log(res, "请求成功")
							/* 这里设置过期时间  0.5则是半小时*/
							let expires=new Date(new Date().getTime()+0.02 * 60 * 60 * 1000)
							console.log(expires,"描述")
							// ,{expires: expires}
							this.Cookies.set("token", res.data.data.token)
							// 存储个人信息的对象
							let objUser = JSON.stringify(res.data.data.adminInfo)
							sessionStorage.setItem("user", objUser)
							// 将账号和密码存储到cooikes里面并且进行加密
							this.Cookies.set('username', this.$Base64.encode(this.ruleForm.user))
							this.Cookies.set('password', this.$Base64.encode(this.ruleForm.pass))
							// 这里进行调用
							loginInfo().then(respone => {
								console.log(respone)
								// 将请求的结果进行存储
								sessionStorage.setItem("perms", respone.data.data.perms)
								// this.$router.push({
								// 	path:"/"
								// })
								this.$router.push('/')
								// window.location.reload();

							}).catch(err => {
									console.log(err,"我请求不到数据")
							})

						}).catch(err => {
							console.log(err, '请求失败')
						})


						// this.$requestUse({
						// 	url:'/admin/auth/login',
						// 	method:'post',
						// 	data:{
						// 		username: this.ruleForm.user,
						// 		password: this.ruleForm.pass,
						// 	}
						// }).then(res=>{
						// 	console.log(res,"请求成功")
						// 	this.Cookies.set("token",res.data.data.token)
						// 	// 存储个人信息的对象
						// 	let objUser=JSON.stringify(res.data.data.adminInfo)
						// 	sessionStorage.setItem("user",objUser)
						// 	// 将账号和密码存储到cooikes里面并且进行加密
						// 	this.Cookies.set('username',this.$Base64.encode(this.ruleForm.user))
						// 	this.Cookies.set('password',this.$Base64.encode(this.ruleForm.pass))
						// }).catch(err=>{
						// 	console.log(err,'请求失败')
						// })


						/* 	this.axios.post("http://192.168.1.54:8080/admin/auth/login", {
									username: this.ruleForm.user,
									password: this.ruleForm.pass,

								}).then((response)=> {
									console.log(response.data.data);
									// 成功之后进行token的临时存储
									sessionStorage.setItem("X-Litemall-Admin-Token",response.data.data.token)
									// 存储个人信息的对象
									let objUser=JSON.stringify(response.data.data.adminInfo) 
									sessionStorage.setItem("user",objUser)
									
									this.axios.get('http://192.168.1.54:8080/admin/auth/info',{
										headers:{
												"X-Litemall-Admin-Token":sessionStorage.getItem("X-Litemall-Admin-Token")
										}
									
									}).then(res=>{
										console.log(res)
										// 将请求的结果进行存储
									
										sessionStorage.setItem("perms",res.data.data.perms)
										// this.$router.push({
										// 	path:"/"
										// })
										this.$router.replace('/')
										// window.location.reload();
										
									}).catch(err=>{
										
									})
									
									
								})
								.catch(function(error) {
									console.log(error);
								}); */




					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
		},
		mounted() {

			// 进行挂载的时候读取选中状态
			// 这么写读出来的不再是字符串了，而是boolean对象
			if(this.Cookies.get('checked')!=null){
				this.checked = JSON.parse(this.Cookies.get('checked'))
				// this.checked=this.Cookies.get('checked')
				console.log("选中的状态", this.checked)
			}
		

			// 进行判断如果选中，并且cooikes里面有账号密码就读取，如果没有就不用管
			if (this.checked) {
				// 那么就将密码记住,取出解密后的字符串
				if (this.Cookies.get('username') != null && this.Cookies.get('password') != null) {
					// 进行解密并且将其进行赋值
					this.ruleForm.user = this.$Base64.decode(this.Cookies.get('username'))
					this.ruleForm.pass = this.$Base64.decode(this.Cookies.get('password'))
				}

			}

		},
		watch: {
			//对checkbox的状态进行监听
			checked() {
				this.Cookies.set('checked', this.checked)
			}

		}

	}
</script>

<style scoped="scoped">
	#login {
		width: 100%;
		height: 100vh;
		background-color: #2D3A4B;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	#login .demo-ruleForm {
		/* display: flex; */
		width: 520px;
		height: 580px;
		border: 1px solid #E9EEF3;

	}

	.el-font {
		color: #FFF;
		text-align: center;
		font-size: 40px;
		margin: 30px 0px;
	}

	/deep/.el-input__inner {
		background-color: #283443 !important;
		padding-left: 30px;
		width: 400px;
		height: 47px;
		line-height: 47px !important;
		color: #FFFFFF;

	}

	/deep/.el-form-item__content {

		margin-left: 0px !important;
		text-align: center;
		margin-top: 10px;
		/* padding-bottom: 20px; */
		/* 	padding-left: 50px;
		padding-right: 50px; */

	}

	/deep/.el-form-item__error {
		left: 60px !important;
	}

	.el-button {
		width: 400px;
	}

	.el-input {
		width: 400px;
	}

	.checkBox {
		width: 400px;
		margin: auto;
		text-align: left;
	}
</style>
